﻿@{
    ViewBag.Title = "Home Page";

}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<style type="text/css">
     *{
         margin:0;
         padding:0;
     }
    .total {
        width: 100%;
        background: url(../Content/Image/back.png) repeat;
        background-size: 100%;
        min-width: 650px;
    }
     .header{
        position:relative!important;
        background-color:transparent !important;
        border:none !important;
        font-size:18px;
        font-weight:bold;
     }
       ul.header_nav a{
        color:white !important;
    }
      ul.header_nav a:hover {
        cursor: pointer;
        color:orange !important;
    }
    div.banner {
        /*background-color:red;*/
        height: 350px;
        position: relative;
        margin-top: 10px;
        /*max-width:1092px;*/
    }
     .banner .introduce{
         /*position:relative;*/
         height:346px;
         /*border:2px solid blue;*/
         /*cursor:pointer;*/
         float:left;
         /*width:180px;*/
         min-width:140px !important;
         /*max-width:100px !important;*/
         /*margin-right:10px;*/
     }
    
    .banner .mark {
        max-width: 100px;
        margin:0 auto;
    }

    .baner .mark ul {
        list-style: none;
    }

    .banner .mark li {
        width: 80px;
        background-color: rgba(255,255,255,0.8);
        display: block;
        float: left;
        border: 1px solid grey;
        margin-top: 15px;
        line-height: 30px;
        text-align: center;
    }
    .mark ul li:hover {
        cursor: pointer;
        background-color: #fa944c;
        transition: all 2s;
        transform: rotate(360deg);
    }
     .banner .introduce p{
         font-size:100%;
         font-family:'Adobe Fan Heiti Std';
         line-height:28px;
     }
      .banner_list {

         display: block;
         height: 350px;
         /*margin: 0 auto;*/
         position:relative;
         /*float:none !important;*/
         overflow:hidden;
     }
        .banner_list .imgs {
            height: 350px;
            display:block;
            width:920px;
            /*max-width:1092px;
            min-width:400px;*/
        }
      .banner_list .imgs a {
             display: inline-block;
             position: absolute;
             margin-top:-10px;
         }
     .banner .number {
         position: absolute;
         margin: 0;
         padding: 0;
         bottom: 10px;
         /*margin:0 auto;*/
         right:10%;
         z-index: 100;

     }
      .banner .number span {
        display: inline-block;
        border: 1px solid black;
        width:18px;
        height:18px;
        border-radius: 50px;
        cursor:pointer;
        background-color:white;
        z-index:101;
       }
     .number span.on {
         background-color: orange;
     }
     .container .article .title {
         display: block;
         height: 50px;
         margin-top:10px;
         font-family:'Adobe Caslon Pro';
         border-bottom:2px solid #1885a8;
     }

     .article ul{
         list-style:none;
     }
     .article ul li{
       display:block;
       /*background-color:#57b2ee;*/
       /*height:45px;*/
       position:relative;
     }
     .article ul li h4{
         display:block;
         padding-top:10px;
         cursor:pointer;
         margin-left:45px;
     }
     .floder span{
        display:inline-block;
        height:45px;
        width:45px;
        position:absolute;
        padding:10px 0 0 10px;
     }

     .floder .table {
         display: none;
         border: 1px solid grey;
         background-color: rgba(217, 224, 209,0.2);
     }
     .article {
         background-color: rgba(217, 224, 209,0.6);
     }
     .footer {
         margin-top:10px;
         height: 40px;
         border-top: 1px solid grey;
         text-align:center;
        
     }
     .footer a{
        display:inline-block;
        margin-top:10px;
         text-decoration:none;
         color:grey;
         font:20px;
     }
     .footer a:hover{
         text-decoration:underline;
         color:blue;
         cursor:pointer;
     }
   

   

</style>

<div class="container total">
        @*导航*@
        <div class="navbar navbar-fixed-top navbar-inverse header" role="navigation">
            <div class="container">
                <div class="navbar-header nav-title ">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand name" href="index.html">
                        <img src="~/Content/Image/Name.png" />
                    </a>
                </div>
                <div class="collapse navbar-collapse navbar-right is-collapse">
                    <ul class="nav navbar-nav header_nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#">Technology Articles</a></li>
                        <li><a href="#">Life</a></li>
                        <li><a href="About">About Author</a></li>
                    </ul>
                </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
        </div>

        @*side部分和轮播图*@
        <div class="row banner">
            <div class="col-md-2 col-xs-2 introduce">
                <div class="logo_img">
                   <img src="~/Content/Image/Logo_img.png" title="感受梦的火焰，感觉飞舞瞬间，当一切浪漫遥远，永恒依然。" class="img-circle" />
                </div>
                <div class="mark">
                    <span>个人标签</span>
                    <ul>
                        <li>执着</li>
                        <li>技术狂热</li>
                        <li>沉稳</li>
                        <li>温柔</li>
                    </ul>
                </div>

            </div>
            <div class="col-md-9 col-xs-9 banner_list">
                <div class="number">
                <span class="on"></span>
                <span></span>
                <span></span>
               </div>
                <div class="imgs">
                    <a href="/" target="" title=""> <img src="~/Content/Image/cat.png" class="imgs img-responsive center-block" title=""/></a>
                    <a href="/" target="" title=""> <img src="~/Content/Image/time.png" class="imgs img-responsive center-block" /></a>
                    <a href="/" target="" title=""><img src="~/Content/Image/rabit.png" class="imgs img-responsive center-block" /> </a>
                </div>
            </div>
        </div>
        @*文章列表*@
        <div class="row article">
            <div class="col-md-11 col-md-offset-1 title"><h3>Articles</h3></div>
            <div class="col-md-11 col-md-offset-1 root_floder">
                <ul>
                    <li class="floder">
                        <span class="glyphicon glyphicon-plus-sign"></span>
                        <h4>Techonology Articles</h4>
                        <div class="table">
                            <p class="more">
                                <a href="#">More</a>
                            </p>
                            <table>
                                <tr>
                                    <td>2014-12</td>
                                    <td>Information Management System</td>
                                    <td>Ting ting Li</td>
                                </tr>
                                <tr>
                                    <td>2016-07</td>
                                    <td>Adventure of Cat</td>
                                    <td>Ting ting Li</td>
                                </tr>
                                <tr>
                                    <td>2016-12</td>
                                    <td>Stars Blog</td>
                                    <td>Ting ting Li</td>
                                </tr>
                            </table>
                        </div>
                    </li>
                    <li class="floder">
                        <span class="glyphicon glyphicon-plus-sign"></span>
                        <h4>About Life</h4>
                        <div class="table">
                            <p class="more">
                                <a href="#">More</a>
                            </p>
                            <table>
                                <tr>
                                    <td>2014-12</td>
                                    <td>Information Management System</td>
                                    <td>Ting ting Li</td>
                                </tr>
                                <tr>
                                    <td>2016-07</td>
                                    <td>Adventure of Cat</td>
                                    <td>Ting ting Li</td>
                                </tr>
                                <tr>
                                    <td>2016-12</td>
                                    <td>Stars Blog</td>
                                    <td>Ting ting Li</td>
                                </tr>
                            </table>
                        </div>
                    </li>
                    <li class="floder">
                        <span class="glyphicon glyphicon-plus-sign"></span>
                        <h4>About Author</h4>
                    </li>
                </ul>
            </div>

        </div>

        @*页尾*@
        <div class="row">
            <div class="col-md-12 footer">
                <a>copyRight@Ting ting Li 18408245708@163.com</a>
            </div>

        </div>
    </div>

  



<script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function () {
        //轮播图的控制
        var imgs = $(".imgs", ".banner_list");// 得到图片
        $(".banner_list a:not(:first-child)").hide();
        count = $(".banner_list a").length;
        $(".number span").on("click", function () {
            var i = $(this).index();
            n = i;//当前图片下标
            if (i >= count) return;
            $(".banner_list a").filter(":visible").fadeOut(400).parent().children().eq(i).fadeIn(800);
            $(".banner_list").css("backgroundColor", "");
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");

        })
        var time = window.setInterval(showAuto, 5000);
        function showAuto() {
            n = n >= (count - 1) ? 0 : ++n;
            $(".number span").eq(n).trigger('click')
        }

        //文章列表的打开关闭
        $("span", ".floder").on("click", function () {
            var icon = $(this);
            var className;
            className = icon.attr("class") == "glyphicon glyphicon-plus-sign" ? "glyphicon glyphicon-minus-sign" : "glyphicon glyphicon-plus-sign";
            icon.attr("class", className);//+和-图标的切换
            //icon.closest(".floder").find(".table").css("display", "block");
            icon.closest(".floder").find(".table").toggle("slow");
        })

        //页尾
        //改变窗口尺寸introduce部分内容的变化：
        //$(window).resize(function () {
        //    var i_size=0;
        //    var x = $(".introduce").css("width");
        //    if(x=="140px")
        //    {
        //        $(".mark", ".introduce").removeClass("hidden");
        //        $("p", ".introduce").addClass("hidden");
        //    }
        //    else {
        //        $(".mark", ".introduce").addClass("hidden");
        //        $("p", ".introduce").removeClass("hidden");
        //    }
        //});


    })
</script>









@*<div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
    </div>

    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                enables a clean separation of concerns and gives you full control over markup
                for enjoyable, agile development.
            </p>
            <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
            <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
        </div>
    </div>*@